<!-- A page that is used to test that a dynamic form fill feature works properly. -->
<body>
  <form name="addr1.1" id="form1" action="https://example.com/" method="post">
    Name: <input type="text" name="firstname" id="firstname_form1"><br>
    Address: <input type="text" name="address1" id="address_form1"><br>
    City: <input type="text" name="city" id="city_form1"><br>
    State: <select name="state" id="state1_form1">
      <option value="CA">CA</option>
      <option value="MA">MA</option>
      <option value="NY">NY</option>
      <option value="MD">MD</option>
      <option value="OR">OR</option>
      <option value="OH">OH</option>
      <option value="IL">IL</option>
      <option value="DC">DC</option>
    </select> <br>
    Zip: <input name="zip" id="zip_form1"> <br>
    Country: <select name="country" id="country_form1" onchange="CountryChanged(this)">
      <option value="CA">Canada</option>
      <option value="US">United States</option>
    </select> <br>
    Company: <input name="company" id="company_form1"> <br>
    Email: <input name="email" id="email_form1"> <br>
    Phone: <input name="phone" id="phone_form1"> <br>
    <input type="reset" value="Reset">
    <input type="submit" value="Submit" id="profile_submit_form1">
  </form>

  <form name="addr1.2" id="form2" action="https://example.com/" method="post">
    Name: <input type="text" name="firstname" id="firstname_form2"><br>
    Address: <input type="text" name="address1" id="address_form2"><br>
    City: <input type="text" name="city" id="city_form2"><br>
    State: <select name="state" id="state_form2">
      <option value="CA">CA</option>
      <option value="MA">MA</option>
      <option value="NY">NY</option>
      <option value="MD">MD</option>
      <option value="OR">OR</option>
      <option value="OH">OH</option>
      <option value="IL">IL</option>
      <option value="DC">DC</option>
    </select> <br>
    Zip: <input name="zip" id="zip_form2"> <br>
    Country: <select name="country" id="country_form2" onchange="CountryChanged(this)">
      <option value="CA">Canada</option>
      <option value="US">United States</option>
    </select> <br>
    Company: <input name="company" id="company_form2"> <br>
    Email: <input name="email" id="email_form2"> <br>
    Phone: <input name="phone" id="phone_form2"> <br>
    <input type="reset" value="Reset">
    <input type="submit" value="Submit" id="profile_submit_form2">
  </form>
</body>

<script src="dynamic_form_utils.js"></script>
<script>

var notify_on_first_name_input_change = {};
var first_name_input_changed = {};

function CountryChanged(select_element) {
  var form_id = select_element.form.id;
  var form_name = select_element.form.name;

  RemoveForm(form_id);
  var new_form = AddNewFormAndFields(form_id, form_name);

  var first_name_input_id = 'firstname_' + form_id;
  var first_name_input = new_form.elements[0];
  first_name_input.onchange = function() {
    if (notify_on_first_name_input_change[first_name_input_id])
      window.domAutomationController.send(first_name_input.value != '');
    else
      first_name_input_changed[first_name_input_id] = true;
  }

  document.getElementsByTagName('body')[0].appendChild(new_form);
}

function hasRefilled(first_name_input_id) {
  var first_name_input = document.getElementById(first_name_input_id);
  if (first_name_input && first_name_input_changed[first_name_input_id]) {
    window.domAutomationController.send(first_name_input.value != '');
  } else {
    notify_on_first_name_input_change[first_name_input_id] = true;
  }
}
</script>
